<!DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节点的增删改查</title>
    <style>
        .div1,.div2,.div3,.div4{
            width: 300px;
            height: 100px;
            /*line-height: 100px;*/
            /*text-align: center;*/
        }
        .div1{
            background-color: aqua;
        }

        .div2{
            background-color: greenyellow;
        }
        .div3{
            height: 300px;
            background-color: blueviolet;
        }
        .div4{
            background-color: pink;
        }

    </style>
</head>
<body>
<div class="div1">
    <button onclick="func_add()">add</button>

    hello div1</div>
<div class="div2">
    <button onclick="func_del()">del</button>
    hello div2</div>
<div class="div3">
    <button onclick="change()">change</button>
    <p>hello div3</p>
</div>
<div class="div4">hello div4</div>
<button onclick="f()">click</button>

<script>
    //1.--添加子标签---
    var farther=document.getElementsByClassName("div1")[0];
    function func_add() {
//          var ele=document.createElement("p");
//            ele.innerHTML="hello p";
//            ele.style.color='red';
//            ele.style.fontSize='30px';
        var ele=document.createElement("input");
        ele.style.backgroundColor='lightgoldenrodyellow';
        farther.appendChild(ele)
    }
    //2.--删除子标签---
    function func_del() {
        var sun=farther.getElementsByTagName("input")[0];
        farther.removeChild(sun)
    }
    //2.--更改子标签---
    function change() {
        var img=document.createElement("img");
        //  img.setAttribute('src','50.jpg');
        img.src="50.jpg";
        img.style.width="200px";
        img.style.height="auto";
        img.style.margin="10px";
        var ele_div3=document.getElementsByClassName('div3')[0];
        var varele_div3_p = ele_div3.getElementsByTagName('p')[0];
        ele_div3.replaceChild(img,varele_div3_p);
    }
    url='http://www.baidu.com';

    window.confirm();
    r =window.prompt();
    console.log(r);

    function f() {
        window.open(winURL,"width:320,height:200");
    }
</script>






</body>
</html>